import { StyleSheet, View, Text, Pressable } from 'react-native'
import useGetStatusBar from '../../utils/useGetStatusBar'
import { useContext, useEffect } from 'react'
import { NavigationContext } from '@react-navigation/native'
import { observer } from 'mobx-react-lite'
import { useStore } from '@/store'
import Swiper from 'react-native-swiper'
import { VideoFullCard } from '@/component/video/videoFullCard'
export default observer(function VideoSwiper() {
  const { variableStore, videoSwiperStore } = useStore()
  const [paddingTop] = useGetStatusBar()
  const navigate = useContext(NavigationContext)
  const videoMinHeight = variableStore.screen.height * 0.39

  function goBack() {
    navigate?.goBack()
  }
  useEffect(() => {
    return () => {
      videoSwiperStore.setShowCommentPage(false)
    }
  }, [])
  const onMomentumScrollEnd = (e: any, state: any) => {
    console.log('onMomentumScrollEnd', state)
  }
  const onIndexChanged = (index: number) => {
    const id = videoSwiperStore.videoList[index].id
    videoSwiperStore.setCurrentVideoId(id)
    if (index === videoSwiperStore.videoList.length - 1) {
      videoSwiperStore.addVideoItem()
    }
  }

  return (
    <View style={style.videoSwiper}>
      <View style={[style.headerMenu, { top: paddingTop }]}>
        <Pressable onPress={goBack}>
          <Text style={style.backIcon}>&#xe601;</Text>
        </Pressable>
      </View>
      <View style={style.videoWrap}>
        <Swiper
          key="bannerSwiper"
          showsVerticalScrollIndicator={false}
          autoplay={false}
          showsButtons={false}
          loop={false}
          showsPagination={false}
          onIndexChanged={onIndexChanged}
          bounces={false}
          onMomentumScrollEnd={onMomentumScrollEnd}
          horizontal={false}
        >
          {videoSwiperStore.videoList.map(item => (
            <VideoFullCard
              key={item.id}
              videoId={item.id}
              videoSource={item.videoSource}
              videoMinHeight={videoMinHeight}
            />
          ))}
        </Swiper>
      </View>
    </View>
  )
})

const style = StyleSheet.create({
  backIcon: {
    fontFamily: 'iconfont',
    fontSize: 24,
    color: '#fff',
  },
  videoSwiper: {
    position: 'relative',
    width: '100%',
    height: '100%',
    backgroundColor: '#373737',
  },

  headerMenu: {
    position: 'absolute',
    zIndex: 10,
    paddingHorizontal: 12,
  },
  videoWrap: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    left: 0,
    top: 0,
  },
})
